<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        body{
            margin:0;
        }/*消除背景编剧“白边”*/
        nav{
             height: 80px;
             width: 100%;
             background-color: rgba(18,183,245,0.5);

            }/*导航*/
        nav>a>img{
                width: 80px;
                height: 80px;
            }
        li>a{
            text-decoration: none;
            font-size: 40px;
            color: #fff;
        }
        nav img{
            position: relative;
            top: 15px;
             margin: 0 50px;
        }
        li{
                line-height: 80px;
                display: inline-block;
                padding:0 30px;
                cursor: pointer;
                text-decoration: none;
            }
        li:hover{
                background-color: #12b7f5;
            }
        header{
            height: 700px;
            background-image: url(1.jpg);/*背景图*/
            background-size: cover;
            display: flex;
            align-items: center;/*垂直居中*/
            justify-content: center;/*水平居中*/
        }
        header>img{
            height:  800px;
            width:800px;
        }
       button>a{
            text-decoration: none;
        }
        header>p{
            position: absolute;
            top: 250px;
            right:500px;
            font-size:35px;
        }
        header>p>a{
            text-decoration: none;/*去掉下划线*/
            border: 2px solid #63B8FF;/*边框*/
            color:#1C86EE;
        }
        header>p>a:hover{
            background-color: #87CEFA;
            color:#C0FF3E;
        }
        button{
            height: 100px;
            width: 400px;
            position:relitive;/*相对定位*/
            top: 100px;/*顶部距离*/
            background-color: transparent;/*将标签背景变透明*/
            font-size: 50px;/*字体大小*/
            color: #ff00ff;/*字体颜色*/
            font-weight:800;/*字体粗细*/
            border:1px solid #C6E2FF;/*边框*/
            outline: none;
            cursor: pointer;
            border-radius: 70%;/*圆*/
        }
        button:hover{
                background-color: #FFFFE0;/*背景色*/
                opacity: 0.8;
                color: #EE82EE;/*鼠标点上去时字的颜色*/
        }

        div{
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        span{
            font-size: 64px;
            color:#E066FF;
        }
        .inner{
               background-image: url(6.jpg);
               margin: 0;
        }
        span:hover{
            color: #FF69B4;
        }
        article{
            height: 600px;
            background-image: url(2.jpg);
            background-size: cover;
            background-attachment:fixed;/*固定背景*/
        }
        main{
            height: 580px;
            background-image:url(3.jpg);
            background-size: cover;
        }
        main{
            height: 900px;
            position: relative;
        }
        main>img{
            position: absolute;
            bottom:550px;/*距离底面距离*/
            left:90px;
            weight:200px;
            width:700px;
        }
        main>aside{
            width: 600px;
            position: absolute;
            top: 550px;
            right: 150px;
            text-align: right;
        }
        aside>h1{
               font-size: 35px;
        }
        aside>p{
              font-size: 25px;
              color:#555;
        }
        aside>p>a{
            text-decoration: none;
            color: #836FFF;
        }
        h2{
            font-size: 70px;
            color: #00EE00;
            background-image: url(5.jpg);
            background-size:250px;
        }
        map{
            display:block;
            width: 100%;
            height: 600px;
        }
        section{
        height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D8BFD8;
        }
        section>img{
        margin:0 20px;
        }
        footer{
            background-color: #fff;
            height: 200px;
        }
        figure{
            width: 1000px;
            margin: 0 auto;
            padding-top: 50px;
            color: #666;
            text-align: center;
        }
    </style>
</head>
<body>
<nav>
    <a href="" title=""><img src="8.gif" alt=""> </a>
    <li><a href="https://user.qzone.qq.com/867474936/friendship?fuin=867474936" title="">秘密</a></li>
    <li><a href="https://user.qzone.qq.com/867474936/4" title="">相册</a></li>
    <li><a href="https://user.qzone.qq.com/867474936/mood" title="">动态</a></li>

</nav>
    <header id="header" class="">
    <img src="13.gif" alt="">
       <button><a href="http://867474936.qzone.qq.com" title="">梦的方向</a></button>
    <p>
       <a href="https://hao.360.cn/?src=lm&ls=n503424099a" title="">百科</a>
       <a href="http://image.so.com/i?src=360pic_strong&z=1&i=3&cmg=12e8439d8e802f6fb7515b0e2d5b063e&q=%E5%AE%87%E5%AE%99%E6%98%9F%E7%A9%BA%E9%AB%98%E6%B8%85%E5%A4%A7%E5%9B%BE" title="">图片</a>
       <a href="http://video.so.com/mini.php?kw=%E6%98%9F%E7%A9%BA%E7%B4%A0%E6%9D%90%E8%A7%86%E9%A2%91" title="">视频</a>
    </p>
    </header><!-- /header --><!-- 头部 -->
    <div class="inner">
       <span>生活——就是不断向梦想的追逐！</span>
    </div>
    <article></article><!-- 文章标签 -->
    <main>

        <img src="7.jpg" alt="">

        <aside>
             <h1>----浩渺无垠的宇宙,星光载满了多少男儿的爱恋银河轨道战队的梦幻回想</h1>
             <p>  战士们用血肉在圣姬的祭坛前起誓,永恒的爱人,不可没灭的命运的羁绊,如何延续和守护对你的爱恋,将彼此的誓言驻扎在广袤的星空,星星为我们作证,带着怨恨情仇,留着生死的记忆,一同去对抗CHAOS世界的神,为家,为爱,为情……</p>
             <p><a href="https://www.so.com/s?q=%E5%A4%AA%E7%A9%BA%E7%9A%84%E5%A5%A5%E7%A7%98&src=srp_suggst_3.2.2&fr=dlm&psid=d7afb0d5bac1153e34e1a8edb10fdabe&ls=n503424099a&eci=37037afdecc67e9a&nlpv=suggest_3.2.2" title="">了解更多</a></p>
        </aside>
    </main>
    <hr color="#7EC0EE">
    <center><h2>心之所往</h2></center>
    <hr color="#7EC0EE">
    <map id="here" ></map><!-- 地图标签 -->
    <hr color="#7EC0EE">
    <video src="大鱼海棠.mp4" autoplay="" autobuffer autoloop loop  controls poster="/images/video.png"  width=100%></video>
<footer>
    <section>
        <img src="10.png" alt="">
        <img src="11.png" alt="">
        <img src="12.png" alt="">
        <audio src="刘亦菲 - 梦不死.mp3" autoplay controls></audio>
    </section>

<center>
    <figure>
        <h3>Copyright  2017-2017 Tencent. All Rights Reserved.</h3>
        <h3>9426 版权所有</h3>
    </figure>
</center>
</footer><!-- 版权 -->
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
   <script>
    function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point, 19);
    window.map = map;}
initMap();
</script>
</html>